<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Manage Products Listing - eKoders Responsive Admin Theme</title>
	
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/fonts.css">
	<link rel="stylesheet" href="assets/font-awesome/css/font-awesome.min.css">
	
	<!-- PAGE LEVEL PLUGINS STYLES -->	
	<!-- REQUIRE FOR SPEECH COMMANDS -->
	<link rel="stylesheet" type="text/css" href="assets/css/plugins/gritter/jquery.gritter.css" />	

    <!-- Tc core CSS -->
	<link id="qstyle" rel="stylesheet" href="assets/css/themes/style.css">
	
	
    <!-- Add custom CSS here -->
	<link rel="stylesheet" href="assets/css/only-for-demos.css">
	<!-- End custom CSS here -->
	
    <!--[if lt IE 9]>
    <script src="assets/js/html5shiv.js"></script>
    <script src="assets/js/respond.min.js"></script>
    <![endif]-->
	
  </head>

  <body>
	<div id="wrapper">
		<div id="main-container">		
			<!-- BEGIN TOP NAVIGATION -->
				<nav class="navbar-top" role="navigation">
					<!-- BEGIN BRAND HEADING -->
					<div class="navbar-header">
						<button type="button" class="navbar-toggle pull-right" data-toggle="collapse" data-target=".top-collapse">
							<i class="fa fa-bars"></i>
						</button>
						<div class="navbar-brand">
							<a href="index.html">
								<img src="assets/images/logo.png" alt="logo" class="img-responsive">
							</a>
						</div>
					</div>
					<!-- END BRAND HEADING -->
					<div class="nav-top">
						<!-- BEGIN RIGHT SIDE DROPDOWN BUTTONS -->
							<ul class="nav navbar-right">
								<li class="dropdown">
									<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-collapse">
										<i class="fa fa-bars"></i>
									</button>
								</li>
								<li class="dropdown">
									<a href="#" class="dropdown-toggle" data-toggle="dropdown">
										<i class="fa fa-envelope"></i> <span class="badge up badge-primary">2</span></a>
											<ul class="dropdown-menu dropdown-scroll dropdown-messages">
												<li class="dropdown-header">
													<i class="fa fa-envelope"></i> 2 New Messages
												</li>
												<li id="messageScroll">
													<ul class="list-unstyled">
														<li>
															<a href="#">
																<div class="row">
																	<div class="col-xs-2">
																		<img class="img-circle" src="assets/images/user-profile-1.jpg" alt="">
																	</div>
																	<div class="col-xs-10">
																		<p>
																			<strong>John Smith</strong>: Hi again! I wanted to let you know that the order...
																		</p>
																		<p class="small">
																			<i class="fa fa-clock-o"></i> 5 minutes ago
																		</p>
																	</div>
																</div>
															</a>
														</li>
														<li>
															<a href="#">
																<div class="row">
																	<div class="col-xs-2">
																		<img class="img-circle" src="assets/images/user-profile-2.jpg" alt="">
																	</div>
																	<div class="col-xs-10">
																		<p>
																			<strong>Roddy Austin</strong>: Thanks for the info, if you need anything...
																		</p>
																		<p class="small">
																			<i class="fa fa-clock-o"></i> 3:39 PM
																		</p>
																	</div>
																</div>
															</a>
														</li>
													</ul>
												</li>
												<li class="dropdown-footer">
													<a href="#">
														Read All Messages
													</a>
												</li>
											</ul>
								</li>
								<li class="dropdown">
									<a href="#" class="dropdown-toggle" data-toggle="dropdown">
										<i class="fa fa-bell"></i> <span class="badge up badge-success">3</span>
									</a>
										<ul class="dropdown-menu dropdown-scroll dropdown-alerts">
											<li class="dropdown-header">
												<i class="fa fa-bell"></i> 3 New Alerts
											</li>
											<li id="alertScroll">
												<ul class="list-unstyled">
													<li>
														<a href="#">
															<div class="alert-icon bg-info pull-left">
																<i class="fa fa-download"></i>
															</div>
																Downloads <span class="badge badge-info pull-right">16</span>
														</a>
													</li>
													<li>
														<a href="#">
															<div class="alert-icon bg-success pull-left">
																<i class="fa fa-cloud-upload"></i>
															</div>
																Server #8 Rebooted <span class="small pull-right"><strong><em>12 hours ago</em></strong></span>
														</a>
													</li>
													<li>
														<a href="#">
															<div class="alert-icon bg-danger pull-left">
																<i class="fa fa-bolt"></i>
															</div>
																Server #8 Crashed <span class="small pull-right"><strong><em>12 hours ago</em></strong></span>
														</a>
													</li>
												</ul>
											</li>
											<li class="dropdown-footer">
												<a href="#">
													View All Alerts
												</a>
											</li>
										</ul>
								</li>
								<li class="dropdown">
									<a href="#" class="dropdown-toggle" data-toggle="dropdown">
										<i class="fa fa-tasks"></i> <span class="badge up badge-info">7</span>
									</a>
										<ul class="dropdown-menu dropdown-scroll dropdown-tasks">
											<li class="dropdown-header">
												<i class="fa fa-tasks"></i> 10 Pending Tasks
											</li>
											<li id="taskScroll">
												<ul class="list-unstyled">
													<li>
														<a href="#">
															<p>
																Purchase Order #439 <span class="pull-right"><strong>52%</strong></span>
															</p>
															<div class="progress progress-striped">
																	<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="52" aria-valuemin="0" aria-valuemax="100" style="width: 52%;"></div>
															</div>
														</a>
													</li>
													<li>
														<a href="#">
															<p>
																March Content Update <span class="pull-right"><strong>14%</strong></span>
															</p>
															<div class="progress">
																<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="14" aria-valuemin="0" aria-valuemax="100" style="width: 14%;"></div>
															</div>
														</a>
													</li>
													<li>
														<a href="#">
															<p>
																Client #42 Data Scrubbing <span class="pull-right"><strong>68%</strong></span>
															</p>
															<div class="progress progress-striped">
																<div class="progress-bar" role="progressbar" aria-valuenow="68" aria-valuemin="0" aria-valuemax="100" style="width: 68%;"></div>
															</div>
														</a>
													</li>
													<li>
														<a href="#">
															<p>
																PHP Upgrade Server #6 <span class="pull-right"><strong>85%</strong></span>
															</p>
															<div class="progress">
																<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width: 85%;"></div>
															</div>
														</a>
													</li>
													<li>
														<a href="#">
															<p>
																Malware Scan <span class="pull-right"><strong>66%</strong></span>
															</p>
															<div class="progress progress-striped active">
																<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="66" aria-valuemin="0" aria-valuemax="100" style="width: 66%;"></div>
															</div>
														</a>
													</li>
												</ul>
											</li>
											<li class="dropdown-footer">
												<a href="#">
													View All Tasks
												</a>
											</li>
										</ul>
								</li>
								<!--Speech Icon-->
								<li class="dropdown">
									<a href="#" class="speech-button">
										<i class="fa fa-microphone"></i>
									</a>
								</li>
								<!--Speech Icon-->
								<li class="dropdown user-box">
									<a href="#" class="dropdown-toggle" data-toggle="dropdown">
										<img class="img-circle" src="assets/images/user.jpg" alt=""> <span class="user-info">John Smith</span> <b class="caret"></b>
									</a>
										<ul class="dropdown-menu dropdown-user">
											<li>
												<a href="profile.html">
													<i class="fa fa-user"></i> My Profile
												</a>
											</li>
											<li>
												<a href="#">
													<i class="fa fa-envelope"></i> My Messages
												</a>
											</li>
											<li>
												<a href="#">
													<i class="fa fa-tasks"></i> My Tasks
												</a>
											</li>
											<li>
												<a href="#">
													<i class="fa fa-gear"></i> Settings
												</a>
											</li>											
											<li>
												<a href="login.html">
													<i class="fa fa-power-off"></i> Logout
												</a>
											</li>
										</ul>
								</li>
								<!--Search Box-->
								<li class="dropdown nav-search-icon">
									<a href="#" class="dropdown-toggle" data-toggle="dropdown">
										<span class="glyphicon glyphicon-search"></span>
									</a>
									<ul class="dropdown-menu dropdown-search">
										<li>
											<div class="search-box">
												<form class="" role="search">
													<input type="text" class="form-control" placeholder="Search" />
												</form>
											</div>
										</li>
									</ul>
								</li>
								<!--Search Box-->
							</ul>
						<!-- END RIGHT SIDE DROPDOWN BUTTONS -->							
						<!-- BEGIN TOP MENU -->
							<div class="collapse navbar-collapse top-collapse">
								<!-- .nav -->
								<ul class="nav navbar-left navbar-nav">
									<li><a href="index.html">Dashboard</a></li>
									<li class="dropdown">
										<a href="#" class="dropdown-toggle" data-toggle="dropdown">
											Components <b class="caret"></b>
										</a>
										<ul class="dropdown-menu">
											<li><a href="elements-ui.html">Elements</a></li>
											<li><a href="button-ui.html">Buttons & Icons</a></li>
											<li><a href="portlet.html">Portlet</a></li>
											<li><a href="jquery-ui.html">jQuery UI</a></li>
										</ul>
									</li>
									<li><a href="front/index.html">FrontEnd <span class="badge badge-primary">New</span></a></li>
								</ul><!-- /.nav -->
							</div>
						<!-- END TOP MENU -->
					</div><!-- /.nav-top -->
				</nav><!-- /.navbar-top -->
				<!-- END TOP NAVIGATION -->

				
				<!-- BEGIN SIDE NAVIGATION -->				
				<nav class="navbar-side" role="navigation">
					<div class="navbar-collapse sidebar-collapse collapse">
					
						<!-- BEGIN SHORTCUT BUTTONS -->
						<div class="media">							
							<ul class="sidebar-shortcuts">
								<li><a class="btn"><i class="fa fa-user icon-only"></i></a></li>
								<li><a class="btn"><i class="fa fa-envelope icon-only"></i></a></li>
								<li><a class="btn"><i class="fa fa-th icon-only"></i></a></li>
								<li><a class="btn"><i class="fa fa-gear icon-only"></i></a></li>
							</ul>	
						</div>
						<!-- END SHORTCUT BUTTONS -->	
							
						<!-- BEGIN FIND MENU ITEM INPUT -->
						<div class="media-search">	
							<input type="text" class="input-menu" id="input-items" placeholder="Find...">
						</div>						
						<!-- END FIND MENU ITEM INPUT -->
						
						<ul id="side" class="nav navbar-nav side-nav">
							<!-- BEGIN SIDE NAV MENU -->							
							<!-- Navigation category -->
							<li>
								<h4>Navigation</h4> 								
							</li>
							<!-- END Navigation category -->
							
							<li>
								<a href="index.html">
									<i class="fa fa-dashboard"></i> Dashboard
								</a>
							</li>
							<!-- BEGIN COMPONENTS DROPDOWN -->
							<li  class="panel">
								<a href="javascript:;" data-parent="#side" data-toggle="collapse" class="accordion-toggle" data-target="#components">
									<i class="fa fa-cogs"></i> Components <span class="fa arrow"></span>
								</a>
									<ul class="collapse nav" id="components">
										<li>
											<a href="portlet.html">
												<i class="fa fa-angle-double-right"></i> Portlets
											</a>
										</li>
										<li>
											<a href="elements-ui.html">
												<i class="fa fa-angle-double-right"></i> Elements <span class="label label-sm label-primary">New</span>
											</a>
										</li>
										<li>
											<a href="tabs_accordions-ui.html">
												<i class="fa fa-angle-double-right"></i> Tabs & Accordions
											</a>
										</li>
										<li>
											<a href="button-ui.html">
												<i class="fa fa-angle-double-right"></i> Buttons & Icons
											</a>
										</li>
										<li>
											<a href="jquery-ui.html">
												<i class="fa fa-angle-double-right"></i> JQuery UI
											</a>
										</li>
										<li>
											<a href="nestable-list.html">
												<i class="fa fa-angle-double-right"></i> Nestable Lists
											</a>
										</li>
										<li>
											<a href="calendar.html">
												<i class="fa fa-angle-double-right"></i> Calendar
											</a>
										</li>
										<!-- BEGIN THREE LEVEL MENU -->
										<li>
											<a href="javascript:;" class="accordion-toggle" data-toggle="collapse"  data-target="#sub-menu">
												<i class="fa fa-angle-double-right"></i> Three Level Menu <span class="fa arrow"></span>
											</a>
												<ul class="collapse nav" id="sub-menu">
													<li>
														<a href="#" title="Title"><i class="fa fa-angle-double-right"></i> item <span class="badge badge-primary">3</span></a>
													</li>
													<!-- BEGIN 4th LEVEL MENU -->
													<li>
														<a href="javascript:;" class="accordion-toggle" data-toggle="collapse"  data-target="#sub-menu2">
															<i class="fa fa-angle-double-right"></i> 4rth Level <span class="fa arrow"></span>
														</a>
															<ul class="collapse nav" id="sub-menu2">
																<li>
																	<a href="#" title="Title"><i class="fa fa-angle-double-right"></i> item1 </a>
																</li>
																<li>
																	<a href="#" title="Title"><i class="fa fa-angle-double-right"></i> item2</a>
																</li>
															</ul>
													</li>
													<!-- END 4th LEVEL MENU -->
												</ul>
										</li>
										<!-- ENDTHREE LEVEL MENU -->
									</ul>
							</li>
							<!-- END COMPONENTS DROPDOWN -->							
							<li>
								<a href="tables.html">
									<i class="fa fa-list"></i> Tables<span class="badge badge-primary">New</span> 
								</a>
							</li>
							<li>
								<a href="typography.html">
									<i class="fa fa-text-width"></i> Typography 
								</a>
							</li>
							<!-- BEGIN FORMS DROPDOWN -->
							<li class="panel">
								<a href="javascript:;" data-parent="#side" data-toggle="collapse" class="accordion-toggle" data-target="#forms">
									<i class="fa fa-edit"></i> Forms <span class="fa arrow"></span>
								</a>
									<ul class="collapse nav" id="forms">
										<li>
											<a href="forms.html">
												<i class="fa fa-angle-double-right"></i> Form Elements 
											</a>
										</li>
										<li>
											<a href="form-tools.html">
												<i class="fa fa-angle-double-right"></i> Form Tools 
											</a>
										</li>										
										<li>
											<a href="form-wizard.html">
												<i class="fa fa-angle-double-right"></i> Wizard & Validation
											</a>
										</li>
									</ul>
							</li>
							<!-- END FORMS DROPDOWN -->

							<!-- BEGIN CHARTS DROPDOWN -->
							<li class="panel">
								<a href="javascript:;" data-parent="#side" data-toggle="collapse" class="accordion-toggle" data-target="#charts">
									<i class="fa fa-bar-chart-o"></i> Charts <span class="fa arrow"></span>
								</a>
									<ul class="collapse nav" id="charts">
										<li>
											<a href="flot.html">
												<i class="fa fa-angle-double-right"></i> Flot Charts 
											</a>
										</li>
										<li>
											<a href="morris.html">
												<i class="fa fa-angle-double-right"></i> Morris Charts 
											</a>
										</li>
									</ul>
							</li>
							<!-- END CHARTS DROPDOWN -->
							
							<!-- Navigation category -->
							<li>
								<h4>Support</h4> 								
							</li>
							<!-- END Navigation category -->

							<!-- BEGIN MORE PAGES DROPDOWN -->
							<li class="panel open">
								<a href="javascript:;" data-parent="#side" data-toggle="collapse" class="accordion-toggle" data-target="#e-pages">
									<i class="fa fa-shopping-cart"></i> eCommerce <span class="fa arrow"></span>
								</a>
								<ul class="collapse nav in" id="e-pages">
									<li>
										<a class="active" href="products.html">
											<i class="fa fa-angle-double-right"></i> Products Listing
										</a>
									</li>
								</ul>
							</li>
							<!-- END MORE PAGES DROPDOWN -->
							
							<!-- BEGIN PAGES DROPDOWN -->
							<li class="panel">
								<a href="javascript:;" data-parent="#side" data-toggle="collapse" class="accordion-toggle" data-target="#pages">
									<i class="fa fa-list"></i> Additional Pages <span class="fa arrow"></span>
								</a>
									<ul class="collapse nav" id="pages">
										<li>
											<a href="profile.html">
												<i class="fa fa-angle-double-right"></i> User Profile 
											</a>
										</li>
										<li>
											<a href="inbox.html">
												<i class="fa fa-angle-double-right"></i> Inbox 
											</a>
										</li>
										<li>
											<a href="pricing.html">
												<i class="fa fa-angle-double-right"></i> Pricing Tables
											</a>
										</li>
										<li>
											<a href="invoice.html">
												<i class="fa fa-angle-double-right"></i> Invoice
											</a>
										</li>
										<li>
											<a href="timeline.html">
												<i class="fa fa-angle-double-right"></i> Timeline
											</a>
										</li>
										<li>
											<a href="login.html">
												<i class="fa fa-angle-double-right"></i> Login & Register 
											</a>
										</li>
										<li>
											<a href="faqs.html">
												<i class="fa fa-angle-double-right"></i> FAQs
											</a>
										</li>
										<li>
											<a href="blank.html">
												<i class="fa fa-angle-double-right"></i> Blank Page
											</a>
										</li>
									</ul>
							</li>
							<!-- END PAGES DROPDOWN -->
							<!-- BEGIN MORE PAGES DROPDOWN -->
							<li class="panel">
								<a href="javascript:;" data-parent="#side" data-toggle="collapse" class="accordion-toggle" data-target="#m-pages">
									<i class="fa fa-tag"></i> More Pages <span class="fa arrow"></span>
								</a>
									<ul class="collapse nav" id="m-pages">
										<li>
											<a href="gallery.html">
												<i class="fa fa-angle-double-right"></i> Gallery
											</a>
										</li>
										<li>
											<a href="error-404.html">
												<i class="fa fa-angle-double-right"></i> Error 404
											</a>
										</li>
										<li>
											<a href="error-500.html">
												<i class="fa fa-angle-double-right"></i> Error 505
											</a>
										</li>
									</ul>
							</li>
							<!-- END MORE PAGES DROPDOWN -->
						</ul><!-- /.side-nav -->

						<div class="sidebar-labels">
							<h4>Labels</h4>							
							<ul>
								<li><a href="#"><i class="fa fa-circle-o text-primary"></i> My Recent <span class="badge badge-primary">3</span></a></li>
								<li><a href="#"><i class="fa fa-circle-o text-success"></i> Background</a></li>
							</ul>
						</div>
						
						<div class="sidebar-alerts">							
							<div class="alert fade in">
								<span>Sales Report</span>
								<div class="progress progress-mini progress-striped active no-margin-bottom">
									<div class="progress-bar progress-primary" style="width: 36%"></div>
								</div>
								<small>Calculating daily bias... 36%</small>
							</div>
						</div>
						
					</div><!-- /.navbar-collapse -->
				</nav><!-- /.navbar-side -->
				<!-- END SIDE NAVIGATION -->
				

				<!-- BEGIN MAIN PAGE CONTENT -->
				<div id="page-wrapper">
					<!-- BEGIN PAGE HEADING ROW -->
						<div class="row">
							<div class="col-lg-12">
								<!-- BEGIN BREADCRUMB -->
								<div class="breadcrumbs">
									<ul class="breadcrumb">
										<li>
											<a href="#">Home</a>
										</li>
										<li><a href="#">eCommerce</a></li>
										<li class="active">Manage Products</li>
									</ul>
									
									<div class="b-right hidden-xs">
										<ul>
											<li><a href="#" title=""><i class="fa fa-signal"></i></a></li>
											<li><a href="#" title=""><i class="fa fa-comments"></i></a></li>
											<li class="dropdown"><a href="#" title="" data-toggle="dropdown"><i class="fa fa-plus"></i><span> Tasks</span></a>
												<ul class="dropdown-menu dropdown-primary dropdown-menu-right">
													<li><a href="#">Add new task</a></li>
													<li><a href="#">Statement</a></li>
													<li><a href="#">Settings</a></li>
												</ul>
											</li>
										</ul>
									</div>
								</div>
								<!-- END BREADCRUMB -->
								
								<div class="page-header title">
								<!-- PAGE TITLE ROW -->
									<h1>Manage Products <span class="sub-title">products listing</span></h1>								
								</div>
								
								<!-- /#ek-layout-button -->	
								<div class="qs-layout-menu">
									<div class="btn btn-gray qs-setting-btn" id="qs-setting-btn">
										<i class="fa fa-cog bigger-150 icon-only"></i>
									</div>
									<div class="qs-setting-box" id="qs-setting-box">
									
										<div class="hidden-xs hidden-sm">
											<span class="bigger-120">Layout Options</span>
											
											<div class="hr hr-dotted hr-8"></div>
											<label>
												<input type="checkbox" class="tc" id="fixed-navbar" />
													<span id="#fixed-navbar" class="labels"> Fixed NavBar</span>
											</label>
											<label>
												<input type="checkbox" class="tc" id="fixed-sidebar" />
													<span id="#fixed-sidebar" class="labels"> Fixed NavBar+SideBar</span>
											</label>
											<label>
												<input type="checkbox" class="tc" id="sidebar-toggle" />
													<span id="#sidebar-toggle" class="labels"> Sidebar Toggle</span>
											</label>
											<label>
												<input type="checkbox" class="tc" id="in-container" />
													<span id="#in-container" class="labels"> Inside<strong>.container</strong></span>
											</label>
										
											<div class="space-4"></div>
										</div>
										
										<span class="bigger-120">Color Options</span>
										
										<div class="hr hr-dotted hr-8"></div>
										
										<label>
											<input type="checkbox" class="tc" id="side-bar-color" />
											<span id="#side-bar-color" class="labels"> SideBar (Light)</span>
										</label>
										
										<ul>									
											<li><button class="btn" style="background-color:#d15050;" onclick="swapStyle('assets/css/themes/style.css')"></button></li>
											<li><button class="btn" style="background-color:#86618f;" onclick="swapStyle('assets/css/themes/style-1.css')"></button></li> 
											<li><button class="btn" style="background-color:#ba5d32;" onclick="swapStyle('assets/css/themes/style-2.css')"></button></li>
											<li><button class="btn" style="background-color:#488075;" onclick="swapStyle('assets/css/themes/style-3.css')"></button></li>
											<li><button class="btn" style="background-color:#4e72c2;" onclick="swapStyle('assets/css/themes/style-4.css')"></button></li>
										</ul>
										
									</div>
								</div>
								<!-- /#ek-layout-button -->				
								
							</div><!-- /.col-lg-12 -->
						</div><!-- /.row -->
					<!-- END PAGE HEADING ROW -->					
						<div class="row space-2x">
							<div class="col-lg-12">
							
								<!-- START YOUR CONTENT HERE -->										
								<div class="row">												
									<!-- Column -->
									<div class="col-md-4">
										<!-- // Products-->
										<h5 class="heading text-uppercase bolder">Featured <small><a href="#">(View All)</a></small></h5>
										<div class="well well-sm white">
											<ul class="list-unstyled">
												<li>
													<div class="media">
														<a class="pull-left" href=""><img src="http://placehold.it/50x50/#ffffff/#000000" class="img-responsive" alt="50x50"></a>
														<div class="media-body">
															<p class="no-margin">Product name</p>
															<p><strong>$5,900</strong></p>
														</div>
													</div>
												</li>
											</ul>
										</div>
										<!-- // Products-->
		
									</div>
									<!-- // Column END -->
												
									<!-- Column -->
									<div class="col-md-4">
										<!-- // Products-->
										<h5 class="heading text-uppercase bolder">Last Order <small><a href="#">(View All)</a></small></h5>
										<div class="well well-sm white">
											<ul class="list-unstyled">
												<li>
													<div class="media">
														<a class="pull-left" href=""><img src="http://placehold.it/50x50/#ffffff/#000000" class="img-responsive" alt="50x50"></a>
														<div class="media-body">
															<p class="no-margin">10 items</p>
															<p><strong>$5,900</strong></p>
														</div>
													</div>
												</li>
											</ul>
										</div>
										<!-- // Products-->
		
									</div>
									<!-- // Column END -->

									<!-- Column -->
									<div class="col-md-4">
										<!-- // Products-->
										<h5 class="heading text-uppercase bolder">Best seller <small><a href="#">(View All)</a></small></h5>
										<div class="well well-sm white">
											<ul class="list-unstyled">
												<li>
													<div class="media">
														<a class="pull-left" href=""><img src="http://placehold.it/50x50/#ffffff/#000000" class="img-responsive" alt="50x50"></a>
														<div class="media-body">
															<p class="no-margin">Product name</p>
															<p><strong>$5,900</strong></p>
														</div>
													</div>
												</li>
											</ul>
										</div>
										<!-- // Products-->
		
									</div>
									<!-- // Column END -->
									
								</div><!-- //row -->
										
								<div class="portlet">
									<div class="portlet-heading inverse">
										<div class="portlet-title">
											<h4><i class="fa fa-edit"></i> Managed Products</h4>	
										</div>
										<div class="portlet-widgets">
											<a href="#" class="tooltip-primary" data-placement="left" data-rel="tooltip" title="" data-original-title="Add product" data-toggle="modal" data-target="#add-products"><i class="fa fa-plus"></i></a>
										</div>
										<div class="clearfix"></div>
									</div>
																
									<div class="portlet-body no-padding-top no-padding-bottom">												
										<table id="products" class="datatable table table-hover table-striped table-bordered tc-table">
											<thead>
												<tr>
													<th><label><input type="checkbox" class="tc"><span class="labels"></span></label></th>
													<th data-hide="phone,tablet">ID</th>
													<th data-class="expand">Product Name</th>
													<th data-hide="phone,tablet">Category</th>
													<th data-hide="phone,tablet">Price</th>
													<th data-hide="phone,tablet">Quantity</th>
													<th data-hide="phone">Date</th>
													<th data-hide="phone">Status</td>
													<th>Action</th>
												</tr>
											</thead>
											<tbody>
												<tr>
													<td></td>
													<td>1</td>
													<td>Brown Boot</td>
													<td>Shoes</td>
													<td>$45</td>
													<td>179</td>
													<td>22/12/2014</td>
													<td><span class="label label-active">Active</span></td>
													<td>
														<div class="btn-group btn-group-xs ">
															<a href="" class="btn btn-inverse"><i class="fa fa-pencil icon-only"></i></a>
															<a href="" class="btn btn-danger"><i class="fa fa-times icon-only"></i></a>
														</div>
													</td>
												</tr>
												<tr>
													<td></td>
													<td>2</td>
													<td>Brown Boot</td>
													<td>Shoes</td>
													<td>$45</td>
													<td>197</td>
													<td>22/12/2014</td>
													<td><span class="label label-pending">Pending</span></td>
													<td>
														<div class="btn-group btn-group-xs ">
															<a href="" class="btn btn-inverse"><i class="fa fa-pencil icon-only"></i></a>
															<a href="" class="btn btn-danger"><i class="fa fa-times icon-only"></i></a>
														</div>
													</td>
												</tr>
												<tr>
													<td></td>
													<td>3</td>
													<td>Brown Boot</td>
													<td>Shoes</td>
													<td>$45</td>
													<td>124</td>
													<td>22/12/2014</td>
													<td><span class="label label-success">Publish</span></td>
													<td>
														<div class="btn-group btn-group-xs ">
															<a href="" class="btn btn-inverse"><i class="fa fa-pencil icon-only"></i></a>
															<a href="" class="btn btn-danger"><i class="fa fa-times icon-only"></i></a>
														</div>
													</td>
												</tr>
												<tr>
													<td></td>
													<td>4</td>
													<td>Brown Boot</td>
													<td>Shoes</td>
													<td>$45</td>
													<td>234</td>
													<td>22/12/2014</td>
													<td><span class="label label-danger">Deleted</span></td>
													<td>
														<div class="btn-group btn-group-xs ">
															<a href="" class="btn btn-inverse"><i class="fa fa-pencil icon-only"></i></a>
															<a href="" class="btn btn-danger"><i class="fa fa-times icon-only"></i></a>
														</div>
													</td>
												</tr>
												<tr>
													<td></td>
													<td>5</td>
													<td>Brown Boot</td>
													<td>Shoes</td>
													<td>$45</td>
													<td>175</td>
													<td>22/12/2014</td>
													<td><span class="label label-active">Active</span></td>
													<td>
														<div class="btn-group btn-group-xs ">
															<a href="" class="btn btn-inverse"><i class="fa fa-pencil icon-only"></i></a>
															<a href="" class="btn btn-danger"><i class="fa fa-times icon-only"></i></a>
														</div>
													</td>
												</tr>
												<tr>
													<td></td>
													<td>6</td>
													<td>Brown Boot</td>
													<td>Shoes</td>
													<td>$45</td>
													<td>139</td>
													<td>22/12/2014</td>
													<td><span class="label label-active">Active</span></td>
													<td>
														<div class="btn-group btn-group-xs ">
															<a href="" class="btn btn-inverse"><i class="fa fa-pencil icon-only"></i></a>
															<a href="" class="btn btn-danger"><i class="fa fa-times icon-only"></i></a>
														</div>
													</td>
												</tr>
												<tr>
													<td></td>
													<td>7</td>
													<td>Brown Boot</td>
													<td>Shoes</td>
													<td>$45</td>
													<td>133</td>
													<td>22/12/2014</td>
													<td><span class="label label-active">Active</span></td>
													<td>
														<div class="btn-group btn-group-xs ">
															<a href="" class="btn btn-inverse"><i class="fa fa-pencil icon-only"></i></a>
															<a href="" class="btn btn-danger"><i class="fa fa-times icon-only"></i></a>
														</div>
													</td>
												</tr>
												<tr>
													<td></td>
													<td>8</td>
													<td>Brown Boot</td>
													<td>Shoes</td>
													<td>$45</td>
													<td>127</td>
													<td>22/12/2014</td>
													<td><span class="label label-inverse">Disabled</span></td>
													<td>
														<div class="btn-group btn-group-xs ">
															<a href="" class="btn btn-inverse"><i class="fa fa-pencil icon-only"></i></a>
															<a href="" class="btn btn-danger"><i class="fa fa-times icon-only"></i></a>
														</div>
													</td>
												</tr>
												<tr>
													<td></td>
													<td>9</td>
													<td>Brown Boot</td>
													<td>Shoes</td>
													<td>$45</td>
													<td>187</td>
													<td>22/12/2014</td>
													<td><span class="label label-active">Active</span></td>
													<td>
														<div class="btn-group btn-group-xs ">
															<a href="" class="btn btn-inverse"><i class="fa fa-pencil icon-only"></i></a>
															<a href="" class="btn btn-danger"><i class="fa fa-times icon-only"></i></a>
														</div>
													</td>
												</tr>
												<tr>
													<td></td>
													<td>10</td>
													<td>Brown Boot</td>
													<td>Shoes</td>
													<td>$45</td>
													<td>147</td>
													<td>22/12/2014</td>
													<td><span class="label label-danger">Deleted</span></td>
													<td>
														<div class="btn-group btn-group-xs ">
															<a href="" class="btn btn-inverse"><i class="fa fa-pencil icon-only"></i></a>
															<a href="" class="btn btn-danger"><i class="fa fa-times icon-only"></i></a>
														</div>
													</td>
												</tr>
												<tr>
													<td></td>
													<td>11</td>
													<td>Brown Boot</td>
													<td>Shoes</td>
													<td>$45</td>
													<td>190</td>
													<td>22/12/2014</td>
													<td><span class="label label-inverse">Disabled</span></td>
													<td>
														<div class="btn-group btn-group-xs ">
															<a href="" class="btn btn-inverse"><i class="fa fa-pencil icon-only"></i></a>
															<a href="" class="btn btn-danger"><i class="fa fa-times icon-only"></i></a>
														</div>
													</td>
												</tr>
												<tr>
													<td></td>
													<td>12</td>
													<td>Brown Boot</td>
													<td>Shoes</td>
													<td>$45</td>
													<td>157</td>
													<td>22/12/2014</td>
													<td><span class="label label-inverse">Disabled</span></td>
													<td>
														<div class="btn-group btn-group-xs ">
															<a href="" class="btn btn-inverse"><i class="fa fa-pencil icon-only"></i></a>
															<a href="" class="btn btn-danger"><i class="fa fa-times icon-only"></i></a>
														</div>
													</td>
												</tr>
												<tr>
													<td></td>
													<td>13</td>
													<td>Brown Boot</td>
													<td>Shoes</td>
													<td>$45</td>
													<td>177</td>
													<td>22/12/2014</td>
													<td><span class="label label-inverse">Disabled</span></td>
													<td>
														<div class="btn-group btn-group-xs ">
															<a href="" class="btn btn-inverse"><i class="fa fa-pencil icon-only"></i></a>
															<a href="" class="btn btn-danger"><i class="fa fa-times icon-only"></i></a>
														</div>
													</td>
												</tr>														
											</tbody>
											<tfoot>
												<tr>
													<td colspan="9">
														<div class="btn-group pull-left">
															<button class="btn btn-primary dropdown-toggle hidden-xs" data-toggle="dropdown">
																 with Selected <span class="caret"></span>
															</button>
															<button class="btn btn-primary dropdown-toggle visible-xs" data-toggle="dropdown">
																<i class="fa fa-cog icon-only"></i>
															</button>
															<ul class="dropdown-menu dropdown-primary" role="menu">
																<li><a href="#">Action</a></li>
																<li><a href="#">Another action</a></li>
																<li class="divider"></li>
																<li><a href="#">Separated link</a></li>
															</ul>
														</div>
													</td>
												</tr>
											</tfoot>
										</table>
												
									</div>
								</div>
								<!-- END YOUR CONTENT HERE -->
					
							</div>
						</div>					
					
					<!-- BEGIN FOOTER CONTENT -->		
						<div class="footer">
							<div class="footer-inner">
								<!-- basics/footer -->
								<div class="footer-content">
									&copy; 2014 <a href="#">eKoders</a>, All Rights Reserved.
								</div>
								<!-- /basics/footer -->
							</div>
						</div>
						<button type="button" id="back-to-top" class="btn btn-primary btn-sm back-to-top">
							<i class="fa fa-angle-double-up icon-only bigger-110"></i>
						</button>
					<!-- END FOOTER CONTENT -->
						
				</div><!-- /#page-wrapper -->	  
			<!-- END MAIN PAGE CONTENT -->
		</div>  
	</div> 

	<!-- Add Products Modal -->
	<div class="modal fade modal-scroll" id="add-products" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
					<h4 class="modal-title" id="myModalLabel"><i class="fa fa-plus-circle"></i> Add Products</h4>
				</div>
				<div class="modal-body padding-2x">
					<form role="form" method="post">
						<div class="form-group">
							<label>Products Title</label>
							<input type="text" class="form-control">
						</div>
						
						<div class="form-group">
							<label>Short Description</label>
							<textarea  class="form-control" ></textarea>
						</div>
						
						<div class="form-group">
							<label>Description</label>
							<div class="wysiwyg-editor" id="desc" style="height: 150px;"></div>
						</div>
												
						<div class="form-group">
							<label>Category</label>
							<select class="form-control">
								<option>Option 1</option>
								<option>Option 2</option>
								<option>Option 3</option>
							</select>
						</div>
												
						<div class="form-group">
							<label>Price</label>
							<input type="text" class="form-control">
						</div>
						
						<div class="form-horizontal">
							<div class="form-group">
								<label class="col-sm-2">Quantity</label>
								<div class="col-sm-4">
									<div id="MySpinner-1" class="spinner">
										<div class="input-group input-small">
											<input type="text" class="spinner-input form-control">
											<div class="spinner-buttons input-group-btn btn-group-vertical">
												<button type="button" class="btn spinner-up btn-xs">
													<i class="fa fa-chevron-up icon-only"></i>
												</button>
												<button type="button" class="btn spinner-down btn-xs">
													<i class="fa fa-chevron-down icon-only"></i>
												</button>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>

						<div class="form-group">
							<label>Products Image</label>
							<div class="input-group">
								<span class="input-group-btn">
									<span class="btn btn-file">
										Browse <input type="file" multiple>
									</span>
								</span>
								<input type="text" class="form-control" readonly>
							</div>
						</div>
												
						<div class="form-group">
							<label>Status</label>
							<select class="form-control">
								<option>Option 1</option>
								<option>Option 2</option>
								<option>Option 3</option>
								<option>Option 4</option>
							</select>
						</div>
						
						<div class="form-horizontal">						
							<div class="form-group">
								<label class="col-sm-2 control-label">Featured?</label>
								<div class="col-sm-3">
									<div class="space-4 hidden-xs"></div>
									<label>													
										<input name="switch-field-1" class="tc tc-switch tc-switch-5" type="checkbox" />
										<span class="labels"></span>
									</label>
								</div>
							</div>
						</div>						
						<div class="form-actions no-padding-bottom">
							<div class="btn-group">
								<button type="submit" class="btn btn-primary">Submit</button>
							</div>
						</div>												
					</form>
				</div>
			</div><!-- /.modal-content -->
		</div><!-- /.modal-dialog -->
	</div><!-- /.modal -->

			
    <!-- core JavaScript -->
    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>
	<script src="assets/js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
	<script src="assets/js/plugins/pace/pace.min.js"></script>

	<!-- PAGE LEVEL PLUGINS JS -->
	<script src="assets/js/plugins/datatables/jquery.dataTables.min.js"></script>
	<script src="assets/js/plugins/datatables/datatables.js"></script>
	<script src="assets/js/plugins/datatables/datatables.responsive.js"></script>
	<script src="assets/js/plugins/bootstrap-wysiwyg/jquery.hotkeys.js"></script>
	<script src="assets/js/plugins/bootstrap-wysiwyg/bootstrap-wysiwyg.js"></script>
	<script src="assets/js/plugins/bootstrap-wysiwyg/ek-wysiwyg.js"></script>
	<script src="assets/js/plugins/fuelux/spinner.min.js"></script>

    <!-- Themes Core Scripts -->	
	<script src="assets/js/main.js"></script>
	
	<!-- REQUIRE FOR SPEECH COMMANDS -->
	<script src="assets/js/speech-commands.js"></script>
	<script src="assets/js/plugins/gritter/jquery.gritter.min.js"></script>

	<!-- initial page level scripts for examples -->
	<script src="assets/js/plugins/slimscroll/jquery.slimscroll.init.js"></script>
	<script src="assets/js/plugins/datatables/datatables.init.js"></script>
	<script>
		$(document).ready(function() {
			//for table master checkbox demo
			$('table th input:checkbox').on('click' , function(){
				var that = this;
				$(this).closest('table').find('tr > td:first-child input:checkbox')
				.each(function(){
					this.checked = that.checked;
					$(this).closest('tr').toggleClass('selected');
				});
						
			});
			
			//Bootstrap Wysiwyg Editor
			$('#desc').ek_wysiwyg({
				toolbar:
					[
					'bold',
					'italic',
					'strikethrough',
					'underline',
					null,
					'justifyleft',
					'justifycenter',
					'justifyright',
					null,
					'createLink',
					'unlink',
					null,
					'insertImage'
				]
			}).prev().addClass('editor-style2 text-center');
			
			$('#MySpinner-1').spinner();
			
			// Custome File Input
			$(document).on('change', '.btn-file :file', function() {
				var input = $(this),
				numFiles = input.get(0).files ? input.get(0).files.length : 1,
				label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
				input.trigger('fileselect', [numFiles, label]);
			});

			$('.btn-file :file').on('fileselect', function(event, numFiles, label) {
        
				var input = $(this).parents('.input-group').find(':text'),
				log = numFiles > 1 ? numFiles + ' files selected' : label;
        
				if( input.length ) {
					input.val(log);
				} else {
					if( log ) alert(log);
				}
        
			});
		
		});
	</script>
  </body>
</html>